<template>
  <el-dialog :visible.sync="dialogVisible" title="新建课本" width="960px" height="800px" :close-on-click-modal="false">
    <el-form :model="formData" label-width="80px" >
      <el-row :gutter="20">

        <el-col :span="16">
          <el-form-item label="课本名称" prop="name">
            <el-input placeholder="课本名称" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="主编" prop="author">
            <el-input placeholder="主编" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="课本版本" prop="edition">
            <el-input placeholder="课本版本" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="出版社" prop="publish">
            <el-input placeholder="出版社" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="年级" prop="grade">
            <el-select v-model="formData.grade">
              <el-option label="一年级" value="一年级"></el-option>
              <el-option label="二年级" value="二年级"></el-option>
              <el-option label="三年级" value="三年级"></el-option>
              <el-option label="四年级" value="四年级"></el-option>
              <el-option label="五年级" value="五年级"></el-option>
              <el-option label="六年级" value="六年级"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="册次" prop="ceci">
            <el-select v-model="formData.ceci" style="width: 100%;">
              <el-option label="无" value=""></el-option>
              <el-option label="上册" value="上册"></el-option>
              <el-option label="下册" value="下册"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="封面">
            <el-upload action="" style="height: ;" list-type="picture-card" :auto-upload="false" :show-file-list="false">
              <img v-if="coverThumb" :src="coverThumb" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="电子课本">
            <el-upload action="" list-type="picture-card" :auto-upload="false" :show-file-list="false">
              <img v-if="pdffile" :src="pdffile" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium">提交申请</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          grade: '一年级',
          ceci: '',
          name: '',
          edition: '',
        },
        coverThumb: '',
        pdffile: '',
        dialogVisible: false
      }
    }
  }
</script>

<style>
</style>
